<template>
	<view class="content">
		<image src="../../static/common/share-bg.png" class="share-bg"></image>
		
		<view class="message-title" :class="{'bgc':bgc}"> 
			<view class="posit">
				<!-- #ifdef H5 || APP-PLUS -->
				<image src="../../static/common/captial-back.png" class="goback" @tap="goback"></image>
				<!-- #endif -->
				<view class="posit-title">分享熊猫优品</view>
				<navigator url="../activityRules/activity-rules" hover-class="none">
					<image src="../../static/common/share-rule.png" class="share-rule"></image>
				</navigator>
				
			</view>
		</view>
		
		<view class="list-scroll-content">
			<image src="../../static/common/inviter-title.png" class="share-title"></image>
			<view class="share-box">
				<view class="share-box-top">
					<image src="../../static/common/share-user-icon.png" class="share-user-icon"></image>
					<view class="share-box-top-title">分享双方即可各获得相应鼓励金</view>
				</view>
				<image src="../../static/common/share-box-bottom.png" class="share-box-bottom"></image>
				<view class="share-btn" @tap="openShare"></view>
			</view>
			<image src="../../static/common/share-step.png" class="share-step"></image>
			<view class="share-step-block">
				<image src="../../static/common/share-step-detail.png" class="share-step-detail"></image>
			</view>
			<view class="my-share-detail">
				<!-- <view class="detail-title">我的邀请战绩</view> -->
				<!-- <view class="invite-detail">
					<view class="invite-item invite-frieds">
						<view class="invite-item-text">共邀请好友</view>
						<view class="invite-item-num">1000</view>
					</view>
					<view class="invite-item">
						<view class="invite-item-text">获得收益（元）</view>
						<view class="invite-item-num">1080.50</view>
					</view>
				</view> -->
				<!-- <navigator url="../myFans/my-fans" hover-class="none">
					<image src="../../static/common/check-detail-btn.png" class="check-detail-btn"></image>
				</navigator> -->
				
				<view class="detail-title invite-top">邀请排行榜</view>
				<!-- <view class="invite-ranking">
					<view class="rank-type ranking-total ranking-selected">总榜</view>
					<view class="rank-type">好友</view>
				</view> -->
				<view class="ranking-list">
					<view class="list-title">
						<view class="title-text">排名</view>
						<view class="title-text">用户</view>
						<view class="title-text">奖励金额（元）</view>
					</view>
					<view class="rank-table-tbody" v-if="rankList.length>0">
						<scroll-view scroll-y="true" v-if="rankList.length>0" class="rank-list" @scrolltolower="loadMore">
							<view class="table-cel" v-for="(item,index) in rankList" :key="index">
								<view class="rank-name">{{getRankName(index)}}</view>
								<view class="rank-avator">
									<image class="avatar" :src="getImg(item.headimg)"></image>
									<text class="rank-user">{{item.phone?item.phone:''}}</text>
								</view>
								<view class="rank-money">{{item.yongjinTotal}}</view>
							</view>
						</scroll-view>
					</view>
					<!-- <view class="rank-total">
						<view class="ranking-item">
							<view class="item-left">
								<image src="../../static/common/user-avator-small.png" class="avatar"></image>
								<view class="item-user">
									<view class="ranking-num">No.1</view>
									<view class="user-id">177****6578</view>
								</view>
							</view>
							<view class="encourage-num">357.55</view>
						</view>
					</view> -->
				</view>
			</view>
			
		</view>
		<!-- 分享 -->
		<uni-popup ref="showshare" :type="type">
			<view class="uni-share">
				<view class="banner">
					<view class="img">
						<canvas  canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}"></canvas>
					</view>
					<view class="tgtit">推广链接：<text class="tugurl">{{qrcoedSrc}}</text></view>
					<view class="sharbuttn">
						<view class="btn" @tap="save">保存二维码</view>
						<view class="btn" @tap="sharurl">复制推广链接</view>
					</view>
					<view class="shartitle"><view>分享</view></view>
					<view class="sharapk">
						<view><image src="../../static/common/share-wxf.png" @tap="InviteShare('WXSceneSession')"></image></view>
						<view><image src="../../static/common/share-wxq.png" @tap="InviteShare('WXSenceTimeline')"></image></view>
					</view>
					<view class="bottom">
						<ul>
							<li>1、好友识别二维码通过手机号进行注册</li>
							<li>2、注册完成后您即可得到相应的鼓励金</li>
						</ul>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup  from'../../components/uni-popup/uni-popup.vue'
	import uQRCode from '../../util/uqrcode.js'
	const util = require('../../util/util.js');
	export default{
		components:{
			uniPopup
		},
		data () {
			return {
				type: 'bottom',
				bgc:false, //页面滚动顶部状态栏改变颜色
				qrcoedSrc:"",
				showCanvas:false,
				qrcodeSize:150,
				apptoken:"",
				qrImg:"",
				pageIndex:1,
				rankList:[],
				nodata:false
			}
		},
		onLoad(){
			
			this.apptoken = uni.getStorageSync('apptoken');
			this.getInviteUrl();
			this.getRank();
		},
		onPageScroll(e) {
			if(e.scrollTop == 0){
				this.bgc = false;
			}else{
				this.bgc = true;
			}
		   // console.log("滚动距离为：" + e.scrollTop);
		},
		methods: {
			getInviteUrl(){
				//获取邀请链接，邀请链接有时间有效期，所以不能缓存，要实时获取
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.userView,
					data:{
						apptoken:this.apptoken
					},
					success(res) {
							console.log(res)
							if(res.data.success){
								_this.qrcoedSrc = res.data.data.inviteUrl;
								console.log(_this.qrcoedSrc)
							}
					}
				})
			},
			makeQrcodeImg(url){
				console.log(url);
				const _this = this;
				//生成二维码
				uQRCode.make({
					canvasId: 'qrcode',
					text: url,
					size: _this.qrcodeSize,
					margin: 10,
					success: res => {
						console.log(res)
						_this.qrImg = res;
						
					}
				})
			},
			save(){
				uni.saveImageToPhotosAlbum({
						filePath: this.qrImg,
						success: function () {
								uni.showToast({
									title:"图片保存成功"
								})
						}
				});
			},
			sharurl(){
				uni.setClipboardData({
				    data: this.qrcoedSrc,
				    success: function () {
				        uni.showToast({
				        	title:"链接复制成功"
				        })
				    }
				});
			},
			InviteShare(scene){
				uni.share({
				    provider: "weixin",
				    scene: scene,
				    type: 2,
				    imageUrl: this.qrImg,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			//防抖事件//分页
			loadMore: util.throttle(function(e) {
				if(!this.nodata){
					this.getRank("loadMore")
				}
			}, 300),
			getRankName(index){
				if(index==0){
					return "冠军王者"
				}else if(index==1){
					return "推广宗师"
				}else if(index==2){
					return "达人高手"
				}else{
					return "潜水小白"
				}
			},
			getImg(img){
				return this.$CommonJS.getBaseImgUrl(img)
			},
			getRank(type){
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.yongjin_rank,
					data:{ apptoken:this.apptoken,pageIndex:this.pageIndex },
					success(res) {
						console.log(res);
						if(res.data.success){
							const d = res.data.data;
							if(d.length<1 && _this.pageIndex!=1){
								_this.$CommonJS.showToast("没有更多数据了");
								_this.nodata = true;
							}else{
								if(type){
									//分页
									d.forEach(item=>{
										_this.rankList.push(item);
									})
								}else{
									_this.rankList = d;
								}
								_this.pageIndex++;
							}
							
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			goback(){
				this.$CommonJS.navigateBack();
			},
			openShare(){
				 this.$refs.showshare.open();
				 this.makeQrcodeImg(this.qrcoedSrc);
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			}
		}
		
	}
</script>

<style>
	@import url("share-panda.css");
	.tugurl{
		color: #999;
	}
	.sharbuttn{
		display: flex;
		justify-content: center;
	}
	.shartitle{
		    width: 80%;
			text-align: center;
			margin-left: 10%;
			border-bottom: 1px solid #dddddd;
			position: relative;
			height: 60upx;
	}
	.tgtit{
		text-align: center;
		font-size: 11px;
		margin-top: 20upx;
	}
	.shartitle view{
		    height: 50upx;
			line-height: 50upx;
			font-size: 28upx;
			color: #999;
			width: 120upx;
			margin: 32upx auto;
			position: absolute;
			background: #fff;
			left: 50%;
			margin-left: -60upx;
	}
	.sharapk{
	 display: flex;
	 justify-content: center;
	 margin: 20upx auto;
	}
	.sharapk view{
		margin: 20upx 50upx;
	}
	.sharapk view image{
		height: 80upx;
		width: 80upx;
	}
	.banner{
		width: 100% ;
		background-color: #FFFFFF;
		border-radius: 60upx 60upx 0 0;
		margin-top: -60upx;
	}
	.banner dl{
		margin-top: -80upx;
	}
	.banner dl dt{
		text-align: center;
	}
	.banner dl dt image{
		width: 160upx;
		height: 160upx;
		border-radius:50% ;
	}
	.banner dl dd{
		text-align: center;
	}
	.img{
		width: auto;
		height: auto;
		margin: 0 auto;
		margin-top: 60upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.img image{
		width: 100%;
		height: 100%;
	}
	.btn{
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}
	.bottom{
		width: 100%;
		height: auto;
		background-size: 20%;
		padding-bottom: 50upx;
	}
	.bottom ul{
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.bottom ul li{
		width: 100%;
		height: 40upx;
		font-size: 13px;
		list-style: none;
	}
</style>
